<template>
    <div class="tab-container">
        <van-tabs 
            title-active-color="#d43c33" 
            title-inactive-color="#000" 
            swipeable
            v-model="active"
        >
            <van-tab style="height:100%;" title="推荐音乐">
                <SongList style="height:100%;"/>
            </van-tab>
            <van-tab title="热门歌手">
                <SingerList style="height:100%;"/>
            </van-tab>
            <van-tab title="搜索">
                <Search/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import SongList from './songList'
import SingerList from './singerList'
import Search from './search'
import Vue from 'vue'
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
export default {
    data() {
        return {
            active: 0,
        }
    },
    components: {
        SongList,
        SingerList,
        Search
    }
}
</script>
<style>
    .van-tabs .van-tabs--line {
        height: 100%;
    }
    .van-tab {
        font-size: 40px;
    }
    .van-tabs--line .van-tabs__wrap {
        height: 80px;
    }
</style>

<style lang="scss" scoped>
    .tab-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 270px;
        bottom: 0;
    }
</style>